<template>
	<view class="wrap">
		<view class="load" v-if="!loading">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<view v-else>
			<view class="nav_body">
				<!-- <view class="nav_cell nav_cellActive" >
					待评价
				</view> -->
				<view class="nav_cell" :class="item.IsEval==IsEval?'nav_cellActive':''" v-for="(item,index) in tabList" :key="index" @click="changeEval(item)">
					{{item.name}}
				</view>
			</view>
			<view style="height: 88rpx;"></view>
			
			<scroll-view class="scollbox" scroll-y="true" :refresher-enabled="true" :refresher-triggered="triggered" @scrolltolower="scrolltolower" @refresherrefresh="onrefresh">
				<view class="evaluate_body" v-if="EvaList.length">
					<view class="evaluate_cell" v-for="(item,index) in EvaList" :key="index">
						<view class="evaluate_shop" @click="nav_to(`/pages/shop/detail?id=${item.ProductID}`)">
							<view class="shop_img">
								<image :src="ImgSplitFun(item.ProductImg)" mode="aspectFill"></image>
							</view>
							<view class="shop_cell">
								<view class="shop_tit">
									{{item.ProductName || '--'}}
								</view>
								<view class="shop_lit">
									{{item.Style || '--'}}
								</view>
							</view>
						</view>
						
						<view class="evaluate_Evabtnbox" v-if="IsEval==0">
							<view class="Evabtnbox_btn" @click="nav_to(`/pages/shop/user_evaluate?productID=${item.ProductID}&orderID=${item.OrderID}&OrderItemID=${item.ID}`)">
								去评价
							</view>
						</view>
						<view class="evaluate_Evabox" v-else>
							<view class="Evabox_cell">
								总体：
								<image :src="whatStar(item.EvalScore, i, 0)" mode="" v-for="(el, i) in 5" :key="i">
								</image>
								<text style="margin-left: 10rpx">{{ item.EvalScore }}</text>
							</view>
							<view class="Evabox_text" v-if="item.Content">
								{{item.Content || '--'}}
							</view>
						</view>
					</view>
				</view>
				<EmptyBox v-else text="暂无评价"></EmptyBox>
				<BtmLogo></BtmLogo>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				tabList:[{name:'待评价',IsEval:0},{name:'已评价',IsEval:1}],
			
				IsEval:0,
				Params:{
					PageIndex:1,
					PageSize:10
				},
				triggered:false,
				
				EvaList:[]
			};
		},
		onLoad() {
			this.MyEvalOrders()
			uni.$on('EvaSuccess',()=>{
				this.MyEvalOrders()
			})
		},
		onUnload() {
			uni.$off('EvaSuccess')
		},
		methods:{
			ImgSplitFun(img){
				if(img){
					return img.split(',')[0]
				}
				return img
			},
			whatStar(num, sindex, lindex = 1) {
				let staring;
				let starhalf;
				let stared;
				if (lindex == 0) {
					//总体高亮
					staring = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853354322424.png';
					//总体半亮
					starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853365936666.png';
					//总体灰色
					stared = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138537770581315.png';
				} else {
					staring = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138533786641363.png';
					starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138533895031496.png';
					stared = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853790278774.png';
				}
			
				const starNum = sindex + 1;
				return num - starNum >= 0 ? staring : num - starNum == -0.5 ? starhalf : stared;
			},
			changeEval(item){
				this.IsEval = item.IsEval
				this.Params.PageIndex = 1
				if(this.IsEval==0){
					this.MyEvalOrders()
				}else{
					this.MyEvalList()
				}
			},
			async MyEvalOrders(){
				let res = await this.$api.post('/Order/MyEvalOrders',{
					...this.Params,
					IsEval:0
				})
				if(res.code==0){
					this.EvaList = this.Params.PageIndex==1 ? res.data : this.EvaList.concat(res.data)
					this.isMore = Array.isArray(res.data) && res.data.length >= this.Params.PageSize;
					this.loading = true
				}else{
					this.$pv.msg(res.message)
				}
				
			},
			async MyEvalList(){
				let res = await this.$api.post('/Order/MyEvalList',this.Params)
				if(res.code==0){
					this.EvaList = this.Params.PageIndex==1 ? res.data : this.EvaList.concat(res.data)
					this.isMore = Array.isArray(res.data) && res.data.length >= this.Params.PageSize;
					this.loading = true
				}else{
					this.$pv.msg(res.message)
				}
				
			},
			onrefresh(){
				
			},
			scrolltolower(){
				
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f7f9;
}
.wrap{
	height: 100vh;
	overflow: hidden;
	.nav_body{
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		z-index: 9;
		.nav_cell{
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}
		.nav_cellActive{
			position: relative;
			color: #5d8bf8;
			font-weight: bold;
			&::before{
				content: '';
				position: absolute;
				content: '';
				left: 50%;
				bottom: 8rpx;
				transform: translate(-50%,0);
				width: 15%;
				height: 8rpx;
				background: #5d8bf8;
				border-radius: 5rpx;
			}
		}
	}
	.scollbox{
		padding: 24rpx;
		box-sizing: border-box;
		width: 100%;
		height: calc(100vh - 88rpx);
	}
	.evaluate_body{
		.evaluate_cell{
			border-radius: 16rpx;
			padding: 24rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.evaluate_shop{
				display: flex;
				align-items: center;
				.shop_img{
					width: 204rpx;
					height: 204rpx;
					min-width: 204rpx;
					margin-right: 24rpx;
					border-radius: 8rpx;
					overflow: hidden;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				.shop_cell{
					flex: 1;
					height: 204rpx;
					.shop_tit{
						width: 100%;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						display: -webkit-box;
						/*弹性伸缩盒子模型显示*/
						-webkit-box-orient: vertical;
						/*排列方式*/
						-webkit-line-clamp: 2;
						/*显示文本行数(这里控制多少行隐藏)*/
						overflow: hidden;
					}
					.shop_lit{
						font-size: 24rpx;
						color: #999;
						margin-top: 30rpx;
					}
				}
			}
			.evaluate_Evabtnbox{
				display: flex;
				justify-content: flex-end;
				.Evabtnbox_btn{
					width: 120rpx;
					height: 50rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 24rpx;
					overflow: hidden;
					background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
				}
			}
			.evaluate_Evabox{
				background-color: #f9f9f9;
				padding: 12rpx;
				border-radius: 8rpx;
				.Evabox_cell{
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-weight: bold;
					image {
						padding: 4rpx;
						width: 34rpx;
						height: 34rpx;
					}
				}
				.Evabox_text{
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
